import React from 'react';
import { Row, Col, Form, Select } from 'antd';
import { cityListAPI } from '../api';

const RegionSelector = ({ form, provinceList, cityList, districtList, setCityList, setDistrictList, setProvinceId, setCityId, setDistrictId }) => {
  return (
    <Row>
      <Col span={5}>
        <Form.Item name={'provinceId'}>
          <Select
            placeholder="省"
            style={{ width: 150 }}
            onChange={async (value) => {
              const res = await cityListAPI(value);
              setCityList(res.data);
              setProvinceId(value);
              setDistrictList([]);
              form.setFieldsValue({
                areaId: '',
                cityId: ''
              });
            }}
            options={provinceList}
            fieldNames={{ value: 'id', label: 'name' }}
          />
        </Form.Item>
      </Col>
      <Col span={5}>
        <Form.Item name={'cityId'}>
          <Select
            placeholder="市"
            style={{ width: 150 }}
            options={cityList}
            fieldNames={{ value: 'id', label: 'name' }}
            onChange={async (value) => {
              const res = await cityListAPI(value);
              setDistrictList(res.data);
              setCityId(value);
            }}
          />
        </Form.Item>
      </Col>
      <Col span={5}>
        <Form.Item name={'areaId'}>
          <Select
            placeholder="区"
            style={{ width: 150 }}
            options={districtList}
            fieldNames={{ value: 'id', label: 'name' }}
            onChange={(value) => {
              setDistrictId(value);
            }}
          />
        </Form.Item>
      </Col>
    </Row>
  );
};

export default RegionSelector;
